<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta name="author" content="小袁同学,1971788445@qq.com,广州新华学院">
  <meta name="Keywords" content="小袁博客,小袁Java学习站,小袁Java学习平台,文章,博客,小袁博客,article,blog">
  <meta name="description" content="小袁博客,小袁Java学习站,小袁Java学习平台,文章,博客,小袁博客,article,blog,分享Java相关的知识和经验以及各大框架的项目开发提供Java学习的圈子">
  <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <link rel="shortcut icon" href="/static/img/favicon.ico">
  <!-- 基础样式库 -->
  <link rel="stylesheet" href="/static/css/bootstrap.css"/>
  <link rel="stylesheet" href="/static/css/font-awesome.css"/>
  <link rel="stylesheet" href="/static/css/animate.css"/>
  <!-- hplus样式库 -->
  <link rel="stylesheet" href="/static/css/hplus.css"/>
  <!-- 公共样式 -->
  <link rel="stylesheet" href="/static/css/customer/common.css"/>
  <!-- 自定义图标库 -->
  <link rel="stylesheet" type="text/css" href="/static/css/xy-iconfont.css"/>
  <!-- 页脚样式 -->
  <link rel="stylesheet" href="/static/css/customer/footer&cbl.css"/>
  <!-- 导航栏样式 -->
  <link rel="stylesheet" href="/static/css/customer/header.css"/>
  <!-- 侧边信息样式 -->
  <link rel="stylesheet" href="/static/css/sideBar/sidebar.css"/>
  <script type="text/javascript" src="/static/js/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap.js"></script>
  <!-- 模板 -->
  <script type="text/javascript" src="/static/js/customer/template.js"></script>
  <!-- 音乐播放器样式 -->
  <link rel="stylesheet" href="/static/css/customer/player.min.css"/>
  <!-- 音乐播放器JS -->
  <script type="text/javascript" src="/static/js/customer/player.min.js"></script>
  <!-- 本页样式 -->
  <link rel="stylesheet" type="text/css" href="/static/css/customer/detail.css"/>
  <!-- element ui -->
  <link rel="stylesheet" href="/static/css/element-ui.css">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="/static/js/vue.js"></script>
  <script src="/static/js/element-ui.js"></script>
  <script src="/static/js/httpVueLoader.js"></script>
  <!-- leEditor -->
  <script src="/static/js/leEditor.js"></script>
  <title>小袁博客</title>
  <style>
    /* 分页样式 */
    .el-pagination__jump {
      color: #55aaff;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div id="main" v-cloak>
  <!-- 导航栏 -->
  <xy-navbar ref="xyNavbar" :user-info="userInfo"></xy-navbar>
  <!-- 导航栏 -->

  <!-- 中间内容 -->
  <div class="gray-bg top-navigation">
    <div id="wrapper">
      <div id="page-wrapper" class="detail_bg">
        <div class="wrapper wrapper-content">
          <div class="container-fluid">
            <div class="col">
              <div class="col-lg-8 col-md-8 col-xs-12 white-bg no-padding opacity-9">
                <div id="articleDetail" class="article-detail white-bg" ref="articleDetail">
                  <!-- 标题 -->
                  <div class="title">
                    <span>{{ articleDate.title }}</span>
                  </div>
                  <div class="info-box">
                    <div class="info">
                      <span><i class="xy-icon xyicon-writer"></i> {{ articleDate.authorName }}</span>
                      <span><i class="xy-icon xyicon-clock"></i> {{ articleDate.publishTime }} 发布</span>
                      <span><i class="xy-icon xyicon-clock"></i> {{ articleDate.editTime }} 编辑</span>
                      <span><i class="xy-icon xyicon-eyes"></i> {{ articleDate.viewCount }}</span>
                      <span><i class="xy-icon xyicon-comment"></i> {{ pageParam.totalCount }}</span>
                    </div>
                    <div class="tags">
                      <span class="t1">分类专栏：</span>
                      <div style="display: inline">
                        <el-tag size="mini" type="warning" v-for="(item,index) in articleDate.categoryList" :key="index">{{ item }}</el-tag>
                      </div>
                      <span class="t1" style="margin-left: 15px;">文章标签：</span>
                      <el-tag size="mini" type="danger" v-for="(item, index) in splitTags(articleDate.tags)" :key="index">{{ item }}</el-tag>
                    </div>
                  </div>
                  <hr>
                  <!-- 文章内容 -->
                  <div class="content">
                    <le-preview ref="md-preview" :is-md="true" :value="html" hljs-css="agate"></le-preview>
                  </div>

                  <!-- 悬浮栏 -->
                  <div :class="value1 ? 'bottom-tools bottom-tools-no' : 'bottom-tools bottom-tools-active'">
                    <div style="height: 100%;display: flex;align-items: center;">
                      <div class="tool-left">
                        <img class="avatar" src="/static/img/b.jpg" alt="小袁同学">
                        <span class="name">小袁同学</span>
                      </div>
                      <div class="t-right">
                        <ul class="operation">
                          <li>
                            <el-tooltip effect="light" content="点赞" placement="top">
                              <div @click="clickLike()" v-if="likeCount !== -1">
                                <img v-show="!likeStatus" class="icon" src="/static/img/icon/likeNoActive.png" />
                                <img v-show="likeStatus" class="icon" src="/static/img/icon/likeActive.png" />
                                <span :class="likeStatus ? 'active' : ''">{{ likeCount }}</span>
                              </div>
                            </el-tooltip>
                          </li>
<!--                          <li>-->
<!--                            <el-tooltip effect="light" content="评论" placement="top">-->
<!--                              <div @click="toCommentArea()">-->
<!--                                <img class="icon" src="/static/img/icon/commentNoActive.png" />-->
<!--                                <span>0</span>-->
<!--                              </div>-->
<!--                            </el-tooltip>-->
<!--                          </li>-->
                          <li>
                            <el-tooltip effect="light" content="收藏" placement="top">
                              <div @click="clickCollect()" v-if="collectCount !== -1">
                                <img v-show="!collectStatus" class="icon" src="/static/img/icon/collectNoActive.png" />
                                <img v-show="collectStatus" class="icon" src="/static/img/icon/collectActive.png" />
                                <span :class="collectStatus ? 'active' : ''">{{ collectCount }}</span>
                              </div>
                            </el-tooltip>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  <div style="margin-top: 50px;">
                    <el-divider><i class="el-icon-chat-dot-square"> 评论 {{ pageParam.totalCount }}</i></el-divider>
                  </div>

                  <!-- 评论 -->
                  <div id="comment" class="comment" ref="comment">
                    <!-- 添加评论区域 -->
                    <div class="com-button" style="margin-bottom: 15px;position: relative;">
                      <span v-if="JSON.stringify(userInfo) === '{}'" class="login">您还未登录，请先 <button @click="loginFormVisible = true">登录</button> 后发表评论</span>
                      <div v-if="JSON.stringify(userInfo) !== '{}'">
                        <el-input
                          type="textarea"
                          placeholder="想对作者说点什么"
                          :rows="rows"
                          resize="none"
                          v-model="content"
                          maxlength="30"
                          @focus="commentFocus()"
                          @blur="commentBlur()"
                          @keyup.native.enter.shift="submitContent()"
                          :show-word-limit="showWordLimit">
                        </el-input>
                        <div style="position: absolute;right: 0;top: 5px;">
                          <el-button :type="buttonType" size="mini" round @click="submitContent()">评论</el-button>
                        </div>
                      </div>
                    </div>

                    <!-- 评论列表 -->
                    <div class="social-feed-box no-margins" v-for="(item, index) in commentList" :key="index"
                         :index="Number">
                      <div class="social-avatar">
						<span class="pull-left">
                          <img alt="image" :src="item.avatar">
						</span>
                        <div class="media-body">
                          <span class="name">{{ item.nickname }}</span>
                          <small class="text-muted"> {{ formatTime(item.commentTime) }}</small>
                          <div class="right-tools" v-if="item.status === '1'">
                            <span @click="deleteComment(item.number)">删除</span>
                          </div>
                        </div>
                      </div>
                      <div class="social-body">
                        <p>{{ item.content }}</p>
                      </div>
                    </div>

                    <!-- 分页 -->
                    <div class="block" style="text-align:center;margin-top:15px;">
                      <el-pagination background @current-change="handleCurrentChange"
                                     :current-page.sync="pageParam.pageIndex" :page-size="pageParam.pageSize"
                                     :total="pageParam.totalCount" hide-on-single-page
                                     layout="prev, pager, next, jumper">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div
                :class="value ? 'col-lg-4 col-md-4 hidden-xs hidden-sm side-fixed' : 'col-lg-4 col-md-4 hidden-xs hidden-sm'" ref="sidebar">
                <!-- 个人资料 -->
                <div class="col-md-12 m-b-md" th:insert="common/commonSidebar::side-personal"></div>
                <!-- 个人资料 -->

                <!-- 搜索 -->
                <div class="col-md-12 m-b-sm padding-l-r-60 opacity-8" th:insert="common/commonSidebar::side-search">

                </div>
                <!-- 搜索 -->

                <!-- 热门文章 -->
                <div class="col-md-12 side-hot padding-l-r-60 opacity-8"
                     th:insert="common/commonSidebar::side-hot"></div>
                <!-- 热门文章 -->

                <!-- 文章档案 -->
                <div class="col-md-12 side-archive padding-l-r-60 opacity-8"
                     th:insert="common/commonSidebar::side-archive"></div>
                <!-- 文章档案 -->

                <!-- 最新文章 -->
                <div class="col-md-12 side-new padding-l-r-60 opacity-8"
                     th:insert="common/commonSidebar::side-new"></div>
                <!-- 最新文章 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 中间内容 -->

  <!-- 回到顶部 -->
  <div>
    <el-backtop :right="20"></el-backtop>
  </div>

  <!-- 登录弹出框框 -->
  <div th:insert="common/common::login-dialog"></div>

  <!-- 提交建议和问题反馈 -->
  <xy-feedback ref="xyFeedback"></xy-feedback>

  <!-- 页脚 -->
  <!--  <div th:insert="common/common::footer"></div>-->
  <!-- 页脚 -->

  <!-- 右侧工具 -->
  <div th:insert="common/common::right-toolbar"></div>
  <!-- 右侧工具 -->

</div>


<!-- 音乐播放器 -->
<div id="player"></div>

<!-- 引入歌曲列表和配置信息 -->
<script type="text/javascript" src="/static/js/customer/music.js"></script>
<!-- hplus的JS -->
<script type="javascript" src="/static/js/content.min.js"></script>
<!-- axios.js -->
<script src="/static/js/axios.min.js"></script>
<!-- Vue挂载 -->
<script th:inline="javascript" type="module">
  import article from "/static/js/api/article.js";
  import articleComment from "/static/js/api/articleComment.js";
  import commonUtil from "/static/js/utils/commonUtil.js";
  import user from "/static/js/api/user.js";
  import feedback from "/static/js/common/dialog/feedback.js";
  import userOperation from "/static/js/common/navbar/userOperation.js";

  // 使用httpVueLoader
  Vue.use(httpVueLoader);

  var app = new Vue({
    el: '#main',
    components: {
      'xy-navbar': 'url:/static/component/navbar/index.vue',
      'xy-feedback': 'url:/static/component/dialog/feedback.vue'
    },
    data() {
      return {
        userInfo: {},
        value: false,
        value1: true,
        html: '',
        // 文章内容
        articleDate: {
          tags: ''
        },
        //  分页
        pageParam: {
          pageSize: 10, // 每页大小
          pageIndex: 1, // 当前页数
          totalCount: 0, // 总记录数
        },
        // 评论数据
        commentList: [],
        content: '',
        rows: 2,
        buttonType: 'info',
        showWordLimit: false,
        // 登录参数
        loginFormVisible: false,
        loginForm: {
          account: '',
          password: ''
        },
        loginRules: {
          account: [
            { required: true, message: '请填写账号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
          ],
        },
        // 点赞收藏状态
        likeStatus: false,
        likeCount: -1,
        collectStatus: false,
        collectCount: -1
      }
    },
    methods: {
      // 滚动监听
      scrollToTop() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTo;
        this.value = scrollTop >= this.$refs.sidebar.clientHeight / 2;
        if (this.$refs.articleDetail.clientHeight < 1000) {
          this.value1 = true;
          return;
        }
        this.value1 = scrollTop > this.$refs.articleDetail.clientHeight - this.$refs.comment.clientHeight - 768;
      },
      // 打开问题反馈框
      openProblemDialog() {},
      // 打开提交建议框
      openSuggestDialog() {},
      // 提交问题反馈
      submitProblemFeedback() {},
      // 提交建议反馈
      submitSuggestFeedback() {},
      // 获取用户数据
      getUserInfo() {},
      // 退出登录
      logout() {},
      // 修改个人信息
      submitEditPersonal() {},
      // 找回密码
      submitFindPassword() {},
      // 修改密码
      submitEditPassword() {},
      // 发送验证码
      sendEmailCode() {},
      // 修改邮箱
      submitEditEmail(){},
      // 发送短信验证码
      sendMobileCode(){},
      // 提交修改号码
      submitEditMobileNumber(){},
      // 文章查询
      findArticleDetail() {
        article.findArticleDetail([[${number}]]).then(res => {
          this.articleDate = res.data.article
        })
      },
      findArticleMarkdown() {
        article.findArticleMarkdown([[${number}]]).then(res => {
          this.html = res.data.content
        })
      },
      // 解析标签
      splitTags(tags) {
        return tags.split(',')
      },
      // 解析时间
      formatTime(time) {
        return commonUtil.formatTime(time)
      },
      // 翻页
      handleCurrentChange(index) {
        this.pageParam.pageIndex = index;
        this.findCommentList();
      },
      // 查询评论
      findCommentList() {
        articleComment.findCommentList(this.pageParam, [[${number}]]).then(res => {
          let data = res.data.commentList;
          this.commentList = data.list;
          this.pageParam.totalCount = data.totalCount;
        })
      },
      // 删除评论
      deleteComment(number) {
        this.$confirm('确认删除改评论？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          articleComment.deleteComment(number).then(_ => {
            if (_) {
              this.$notify({
                title: '操作',
                message: '评论删除成功',
                type: 'success'
              });
              this.findCommentList()
            }
          })
        })
      },
      // 评论相关
      commentFocus(e) {
        console.log('聚焦');
        this.rows = 4;
        this.buttonType = 'danger';
        this.showWordLimit = true
      },
      commentBlur(e) {
        console.log('离开');
        this.rows = 2;
        this.buttonType = 'info';
        this.showWordLimit = false
      },
      // 发表评论
      submitContent() {
        if (this.content === '') {
          this.$message('评论内容不能为空')
        }else {
          let param = {};
          param['articleNumber'] = [[${number}]];
          param['content'] = this.content;
          articleComment.addComment(param).then(_ => {
            if (_) {
              this.$message({
                message: '评论成功',
                type: 'success'
              });
              this.content = '';
              this.findCommentList();
            }
          })
        }
      },
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            user.login(this.loginForm).then(_ => {
              if (_) {
                window.location.reload();
              }
            })
          }
        });
      },
      // 点击点赞
      clickLike() {
        if (JSON.stringify(this.userInfo) === '{}') {
          this.loginFormVisible = true;
          return;
        }
        // 发送请求
        article.likeArticle([[${number}]]).then(res => {
          this.likeCount = res.data.like.likeCount;
          this.likeStatus = res.data.like.status
        });
      },
      // 获取点赞信息
      getLikeInfo() {
        article.getLikeInfo([[${number}]]).then(res => {
          this.likeCount = res.data.like.likeCount;
          this.likeStatus = res.data.like.status
        })
      },
      // 点击收藏
      clickCollect() {
        if (JSON.stringify(this.userInfo) === '{}') {
          this.loginFormVisible = true;
          return;
        }
        // 发送请求
        article.collectArticle([[${number}]]).then( res => {
          this.collectCount = res.data.collect.collectCount;
          this.collectStatus = res.data.collect.status;
        })
      },
      // 获取收藏信息
      getCollectInfo() {
        article.getCollectInfo([[${number}]]).then( res => {
          this.collectCount = res.data.collect.collectCount;
          this.collectStatus = res.data.collect.status;
        })
      }
    },
    mounted() {
      window.addEventListener('scroll', this.scrollToTop);
      this.findCommentList()
    },
    beforeMount() {
      this.findArticleDetail();
      this.findArticleMarkdown();
      this.getLikeInfo();
      this.getCollectInfo();
    },
    created() {
      // 函数覆盖
      this.openProblemDialog = feedback.openProblemDialog();
      this.openSuggestDialog = feedback.openSuggestDialog();
      this.submitProblemFeedback = feedback.submitProblemFeedback();
      this.submitSuggestFeedback = feedback.submitSuggestFeedback();
      // 顶部个人相关方法
      this.getUserInfo = userOperation.getUserInfo();
      this.getUserInfo();
      this.logout = userOperation.logout();
      this.submitEditPersonal = userOperation.submitEditPersonal();
      this.submitFindPassword = userOperation.submitFindPassword();
      this.submitEditPassword = userOperation.submitEditPassword();
      this.sendEmailCode = userOperation.sendEmailCode();
      this.submitEditEmail = userOperation.submitEditEmail();
      this.sendSmsCode = userOperation.sendSmsCode();
      this.submitEditMobileNumber = userOperation.submitEditMobileNumber();
    }
  })
</script>
</body>
</html>